<template>
  <div class="box">
    <div class="top">
      <div style="flex: 1">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="协同大厅" name="a"></el-tab-pane>
          <el-tab-pane label="人员管理" name="b"></el-tab-pane>
          <el-tab-pane label="组织人员" name="f"></el-tab-pane>
          <el-tab-pane label="资金管理" name="c"></el-tab-pane>
          <el-tab-pane label="进度管理" name="d"></el-tab-pane>
          <el-tab-pane label="项目推进管理" name="e"></el-tab-pane>

          <el-tab-pane disabled>
            <template slot="label" v-if="activeName == 'b'">
              <div class="tagRight">
                <el-input
                  class="noBorder"
                  placeholder="项目名称编号"
                  v-model="input4"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <img src="@/assets/images/组织管理/u462.svg" alt="" />
                <img
                  src="@/assets/images/组织管理/u458.svg"
                  alt=""
                  @click="$refs.poper.dialogVisible = true"
                />
                <img src="@/assets/images/组织管理/u459.svg" alt="" />
                <img src="@/assets/images/组织管理/u457.svg" alt="" />
                <img src="@/assets/images/组织管理/u460.svg" alt="" />
                <img src="@/assets/images/组织管理/u461.svg" alt="" />
              </div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="content">
      <collaborativeHall ref="poper" v-if="activeName == 'a'" />
      <Poper ref="poper" v-if="activeName == 'b'" />
      <organizationalManagement v-if="activeName == 'f'" />
    </div>
  </div>
</template>
<script>
import Poper from "./collaborComponents/poper.vue";
import collaborativeHall from "./collaborComponents/collaborativeHall.vue";
import organizationalManagement from "./collaborComponents/organizationalManagement.vue";
export default {
  components: {
    Poper,
    collaborativeHall,
    organizationalManagement,
  },
  data() {
    return {
      input4: "",
      list1: [
        { text: "组织机构", is: true },
        { text: "协同管理员", is: false },
        { text: "工人管理", is: false },
        { text: "考勤管理", is: false },
      ],
      listIndex: "组织机构",

      activeName: "b",
    };
  },
  methods: {
    changeList1(item, val) {
      if (val == "list1") {
        this.list1.forEach((ele) => {
          if (ele.text == item.text) {
            ele.is = true;
            this.listIndex = ele.text;
          } else {
            ele.is = false;
          }
        });
      }
    },
    handleClick() {},
  },
};
</script>
<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  .top {
    height: 80px;
    /* display: flex; */
  }
  .content {
    height: calc(100% - 80px);
    overflow: auto;
    display: flex;
  }
}

::v-deep .el-tabs__nav {
  width: 100%;
  .el-tabs__item {
    margin-bottom: 15px;
    font-size: 20px;
  }
  .is-active {
    color: black;
    font-weight: bold;
  }
  .el-tabs__item:nth-last-of-type(1) {
    float: right;
  }
}
.tagRight {
  height: 100%;
  display: flex;
  align-items: center;
  float: right;
  > img {
    margin-left: 15px;
  }
}

::v-deep .noBorder .el-input__inner {
  border: none;
}
</style>
